CSS 设计指南笔记

不定期抱持更新

作者 Haojen Ma 日期 2016-01-04
CSS
CSS 设计指南笔记

阅读动机:

  1. 深入系统的了解 CSS3
  2. CSS3 实战

<!-- more -->

第一章 HTML 标记与文档结构

因为内容基础,基本已经了解到足够深入,所以已在第一遍阅读时略过

第二章 CSS 工作原理

知识点:

  1. CSS 的层叠机制
  2. CSS 的选择符
  3. CSS Rule

所有用于选择特定元素的选择符又分三种。 1. 上下文选择符。基于祖先或同胞元素选择一个元素。 2. ID 和类选择符。基于 id 和 class 属性的值(你自己设定)选择元素。

  1. 属性选择符。基于属性的有无和特征选择元素。

伪类和伪元素

大概分为两种: 一种是 UI 伪类,一种是结构化伪类

  1. UI 伪类
    1. link 伪类
      1. link
      2. visited
      3. hover
      4. active
    2. focus 伪类
    3. target 伪类
  2. 结构化伪类
    1. first-child & last-child
    2. nth-child(odd or even)

伪元素

一种在文档中若有实无的元素

  1. ::first-letter
  2. ::first-line
  3. ::before and after

层叠机制

继承: 可以继承的多数跟文本有关: 字体样式, 颜色,字号 不能继承的: 盒子的定位和显示方式,边距,外边距(这里有歧义,因为如果父元素设置了不可见,其中子元素也会不可见) 层叠之样式来源:

  1. 行内样式
  2. 内嵌样式
  3. 链接样式

浏览器的层叠顺序:

  1. 浏览器默认样式表
  2. 用户样式表
  3. 作者链接样式表
  4. 作者嵌入样式
  5. 作者行内样式

层叠规则:

  1. 找到应用给每个元素和属性的所有声明
  2. 按照顺序和权重排序
  3. 特指度
  4. 顺序决定权重

规则声明: CSS 属性值类型主要分为三类

  1. 文本值
  2. 数字值
  3. 颜色值
    1. 文字表达 如 red , blue
    2. RGB or RGBA rgb() or rgba()
    3. 16进制 #fff
    4. HSL or HSLA

自我小结在没有给内容添加宽度的时候, margin border padding 会向内影响到内容的宽度, 而指定了内容的宽度后,三者会向外扩展,不会影响到内容的宽度

定位

清除浮动的三种方法

  1. 为父元素应用 overflow:hidden
  2. 浮动父元素
  3. 为父元素的末尾添加一个元素用于 clear : 浮动

第四章 字体和文字

字体

  1. font-family 字体种类
  2. font-style 字体样式
  3. font-width 字体粗细
  4. font-variant 字体变化 样式的大小写变化
  5. font 以上四种形式的简写

字符串

  1. text-indent 用来将文字缩进
  2. letter-spacing 字母之间的间距
  3. word-spacing 单词之间的间距
  4. text-decoration 文字装饰 上划线,中划线,下划线
  5. text-align 文字水平居中
  6. line-height 行高
  7. text-transform 文字转换 文字整体的大小写转换 为每个单词的首字母大写
  8. vertical-align 文字垂直居中 上标,中上标,中,中下标,下标

页面布局

  1. 流动布局
  2. 固定布局
  3. 弹性布局

没有定义宽度的元素在水平方向上会适应其父元素,其内容会随着外边距,边框和内边距的增加而减少

New Knowledge

 box-sizing

如果将某一个元素添加该属性后, 该元素的边框与内边距放入内容中,换句话说边框和边距的增加将会影响到内容区

word-wrap //break-word 换行过长的字符串

用来防止长单词或者长 URL 破坏布局结构

选择符技巧

  1. 类应该用于标记具有相同特征的元素
  2. 给标记中每个主要区域的顶级元素添加一个 ID , 让该 ID 成为你的路标,帮你更快捷更准确的选择其内元素 , 记住 ID 不是元素的标签, 而是一个路标

第六章

下拉菜单的要点

  1. 功能样式要与装饰样式分离
  2. 要给 a 标签添加样式和行为
  3. 下拉菜单布局是由列表嵌套来的
  4. 可以在 a 元素上应用 border-width 和 border-color 为透明,来制造一个伪边距
  5. 可以用 background-clip 控制背景的覆盖区, 值有 content-box ; padding-box;border-box
  6. 给 li 元素添加 相对定位 , 用于给子 UL 定位参照
  7. 给 li 元素的子集 ul 添加绝对定位
  8. 悬停时显示 .class li:hover>ul{display:block}
  9. 除了 a 元素的 display:block 用来让 a 元素最大化填充 li 内容区,其他 display 为 block 都用来添加到 ul 上,操作元素的显示与隐藏
  10. 突出显示路径的方法: 给每个父级元素添加: hover 并在子级添加样式. 如 li:hover ul{some style css},原理是 hover 事件会向上冒泡

表单

所有表单的标记都包含在一个 form 中

  1. 控件组 控件就是让用户输入,点选,勾选的组件
    1. fieldset (与 legend 配合使用)
    2. legend (在 fieldset 中作为说明使用)
  2. 控件类型(input type)
    1. text
    2. password
    3. radio
    4. submit
    5. time, date, search :HTML5文本框的变体

去掉输入框焦点状态时的蓝色边框用 out-line : none

FEATURED TAGS
CSS
FRIENDS